<template>
  <view class="listDetails">
    <view class="contentInfoBox">
      <view class="topBox">
        <view class="list-top">
          <view class="left">
            <view class="userInfo">
              <view class="avatar">
                <image class="avatar" :src="detail.avatar" @click="previewImage(detail.avatar)" />
              </view>

              <view class="infoData">
                <view class="topC">
                  <view class="name ellipsis"> {{ detail.name || "-" }} </view>
                  <image class="sex" :src="
                    detail.sex == '女'
                      ? 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/09/5285d5d3bab744009c3ab3a9a243f8de.png'
                      : 'http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/09/6645a9716ba349119fe1fbd3e4b8ada5.png'
                  " />
                  <view class="status" :class="{ active: detail.verifyStatus === '1' }">
                    {{ detail.verifyStatus === "1" ? "已实名" : "未实名" }}
                  </view>
                </view>

                <view class="bottomC">
                  {{ detail.age || "-" }}岁｜{{ detail.education || "-" }}｜{{
                    detail.workExperience || "-"
                  }}年经验
                </view>
              </view>
            </view>
          </view>

          <view class="right" @click="collectChange">
            <image v-if="collect" class="scIcon" src="@/static/images/Ehome/scActive.png" />
            <image v-else class="scIcon" src="@/static/images/Ehome/scDetault.png" />
            <text class="sc" selectable="false" space="false" decode="false">
              收藏
            </text>
          </view>
        </view>

        <!-- line -->
        <view
          style="margin-left: 24rpx;margin-right: 24rpx;margin-top: 40rpx;margin-bottom: 24rpx;background-color: #d8d8d8;height: 1rpx;opacity: 0.45;" />

        <view class="intention">
          <view class="l-b">
            <view class="label"> {{ detail.jobType || "-" }} </view>

            <view class="position">
              <span class="t1">意向</span>
              <span class="t2">{{ detail.postName || "-" }}</span>
            </view>
          </view>
          <view class="r-b">
            <view class="address"> {{ detail.city || "-" }} </view>
            <view class="money">
              <span class="icon">￥</span>
              <span class="num">
                {{ detail.salary || "-" }}
                <!--  0.8
                <span class="k">k</span>

                -10 <span class="k">k</span> -->
              </span>
            </view>
          </view>
        </view>
      </view>

      <view class="toApply">
        <view class="title"> 求职意向 </view>

        <view class="industry">
          <view class="t1"> 意向行业 </view>
          <view class="t2"> {{ detail.postName || "-" }} </view>
        </view>

        <view class="industry">
          <view class="t1"> 到岗时间 </view>

          <view class="t2">
            {{ detail.arrivalTime || "-" }}
            <!-- 30天内到岗  -->
          </view>
        </view>
        <view class="industry-1">
          <view class="t1"> 联系电话 </view>
          <!-- <view v-if="applyStatus === '0' || applyStatus === '1'">************</view> -->
          <view class="t2">{{ detail.mobile || "--" }}</view>
        </view>

        <view class="desc" v-if="detail.isPass !== '1'">
          <text class="text" selectable="false" space="false" decode="false">
            简历 申请通过 即可查看完整联系方式
          </text>
        </view>
      </view>

      <view class="toApply">
        <view class="title"> 个人描述 </view>
        <view class="contentDesc">
          <!-- 我是一名充满热情与责任心的客房主管，拥有扎实的酒店管理理论基础和多年的实战经验。我的职业旅程始于对客户服务行业的深深热爱，并且持续地在提高宾客满意度、提升服务质量和优化运营效率方面付出努力。 -->
          {{ detail.remark || "--" }}
        </view>
      </view>
    </view>
    <!-- 底部操作 -->
    <view class="footer-operate">
      <view v-if="detail.isPass == '1'" class="footer-btn">已通过申请</view>
      <view v-else class="footer-btn active" @click="openPopup">邀请投递</view>
    </view>
    <view class="footer-operateH"></view>

    <!-- 普通弹窗 -->
    <uni-popup ref="popup" type="center">
      <view class="popup-content">
        <view class="popup-title">邀请投递</view>
        <view class="popup-tip">请选择邀请投递的岗位</view>
        <scroll-view scroll-y="true" class="scroll-main">
          <radio-group class="radio-list" @change="radioChange">
            <label class="radio-item" v-for="(item, index) in list" :key="item.value">
              <radio :value="item.positionId" :checked="index === current" />{{
                item.positionName
              }}
            </label>
          </radio-group>
        </scroll-view>
        <view class="popup-bottom">
          <view class="btn1" @click="closePopup">取消</view>
          <view class="btn1 active" @click="submitFn">立即邀请</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  getTalentsDetail,
  postDeliver,
  getCollectState,
  collectTalents,
  myPosition,
} from "@/api/subPage/talents.js";
export default {
  components: {},
  data() {
    return {
      id: "",
      detail: {},
      collect: false, //true已收藏 false未收藏
      current: null,
      positionId: "",
      list: [
        { positionId: "1777941827822493698", positionName: "前端开发" },
        { positionId: "1777942036392648706", positionName: "前端开发2" },
        { positionId: "1777942213295808514", positionName: "vue前端开发" },
      ],
      applyStatus: ''
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) {
    console.log(options);
    this.id = options.id;
    this.applyStatus = options.applyStatus
    this.getDetail();
  },
  onShow() { },
  onReady() { },
  methods: {
    // 选择岗位
    radioChange: function (e) {
      console.log(e.detail.value);
      this.positionId = e.detail.value;
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].value === e.detail.value) {
          this.current = i;
          break;
        }
      }
    },
    // 获取详情
    getDetail() {
      let id = this.id;
      getTalentsDetail(id).then((res) => {
        console.log(res);
        this.detail = res.data;
      });
      this.getCollectStateFn();
    },
    // 点击图片预览
    previewImage(url) {
      uni.previewImage({
        urls: [url],
      });
    },
    // 获取收藏状态
    getCollectStateFn() {
      getCollectState(this.id).then((res) => {
        // console.log(res)
        this.collect = res;
      });
    },
    // 改变收藏状态
    collectChange() {
      // 状态（true=确认收藏 false=取消收藏）
      // this.collect = !this.collect;
      collectTalents({
        wxUserId: this.id,
        state: !this.collect,
      }).then((res) => {
        if (res.code == 200) {
          this.collect = !this.collect;
        } else {
          uni.showToast({
            title: "收藏失败",
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
    // 邀请按钮
    openPopup() {
      myPosition().then((res) => {
        if (res.code == 200) {
          this.list = res.data;
          this.$refs.popup.open();
        }
      });
    },
    closePopup() {
      this.$refs.popup.close();
    },
    // 立即按钮
    submitFn() {
      if (this.positionId == "") {
        return true;
      }
      let form = {
        positionId: this.positionId,
        seUserId: this.detail.wxUserId,
      };
      console.log(form);
      postDeliver(form).then((res) => {
        console.log(res);
        if (res.code == 200) {
          // uni.showModal({
          //   title: "已经成功邀请投递",
          //   content: "关注公众号，开启消息提醒",
          //   cancelText: "下次再说",
          //   confirmText: "立即关注",
          //   success: function (res) {
          //     if (res.confirm) {
          //       console.log("立即关注");
          //     } else if (res.cancel) {
          //       console.log("下次再说");
          //     }
          //   },
          // });
          this.getDetail();
          this.closePopup();
          setTimeout(() => {
            uni.showToast({
              title: "邀请成功",
              icon: "none",
              duration: 2000,
            });
          }, 500)
        } else {
          uni.showToast({
            title: "邀请失败",
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.popup-content {
  width: 68vw;
  min-height: 400rpx;
  border-radius: 20rpx;
  background: #ffffff;
  padding: 40rpx;

  .popup-title {
    font-weight: 500;
    font-size: 36rpx;
    color: #000000;
    text-align: center;
  }

  .popup-tip {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    margin-top: 10rpx;
    text-align: center;
  }

  .scroll-main {
    height: 500rpx;
  }

  .radio-list {
    padding: 20rpx 0;

    .radio-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1px solid #f2f2f2;
    }
  }

  .popup-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30rpx;

    .btn1 {
      flex: 1;
      height: 88rpx;
      font-size: 28rpx;
      color: #000000;
      line-height: 88rpx;
      text-align: center;
      background: rgba(216, 216, 216, 0.24);
      border-radius: 50rpx;
      margin: 0 20rpx;

      &.active {
        color: #ffffff;
        background: #ff9e24;
      }
    }
  }
}

.listDetails {
  min-height: 100vh;
  width: 100%;
  background-color: #fcfcfc;
  overflow: auto;

  .contentInfoBox {
    margin: 24rpx 24rpx 40rpx;

    .topBox {
      // width: 702rpx;
      min-height: 320rpx;
      background: #ffffff;
      box-shadow: 0 4rpx 16rpx 0 #3c3c3c14;
      border-radius: 16rpx;
      padding-bottom: 20rpx;

      .list-top {
        display: flex;
        justify-content: space-between;

        .left {
          padding-left: 24rpx;
          padding-top: 32rpx;

          .userInfo {
            display: flex;

            .avatar {
              width: 112rpx;
              height: 112rpx;
              margin-right: 16rpx;
              background: #eee;
            }

            .infoData {
              .topC {
                display: flex;
                align-items: center;
                margin-bottom: 8rpx;

                .name {

                  height: 50rpx;

                  font-weight: 500;
                  font-size: 36rpx;
                  color: #000000e0;
                  letter-spacing: 0;
                  margin-right: 12rpx;
                }

                .sex {
                  width: 24rpx;
                  height: 24rpx;
                }

                .status {
                  width: 82rpx;
                  height: 32rpx;
                  text-align: center;
                  line-height: 32rpx;
                  background: #f3f3f3;
                  border-radius: 8rpx;
                  font-weight: 500;
                  font-size: 18rpx;
                  color: rgba(0, 0, 0, 0.64);

                  &.active {
                    color: #9b7748;
                    background: #ffebd1;
                  }
                }
              }

              .bottomC {
                color: #00000073;
                font-size: 24rpx;
                font-face: PingFangSC;
                font-weight: 500;
                letter-spacing: 0;
                text-align: left;
              }
            }
          }
        }

        .right {
          padding: 32rpx 24rpx 32rpx 10rpx;
          display: flex;
          height: 36rpx;
          align-items: center;

          .scIcon {
            width: 36rpx;
            height: 36rpx;
          }

          .sc {
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 22rpx;
            color: #00000073;
            letter-spacing: 0;
          }
        }
      }

      .intention {
        display: flex;
        justify-content: space-between;
        padding: 0 24rpx;

        .l-b {
          width: 500rpx;

          .label {
            width: 120rpx;
            height: 40rpx;
            line-height: 40rpx;
            text-align: center;
            background: #34a1ff;
            border-radius: 6rpx;

            font-weight: 500;
            font-size: 22rpx;
            color: #ffffff;
            letter-spacing: 0;

            margin-bottom: 20rpx;
          }

          .position {
            .t1 {
              width: 44rpx;
              height: 30rpx;

              font-weight: 500;
              font-size: 22rpx;
              color: #00000073;
              letter-spacing: 0;
              padding-right: 12rpx;
            }

            .t2 {
              width: 128rpx;
              height: 45rpx;

              font-weight: 500;
              font-size: 32rpx;
              color: #000000a3;
              letter-spacing: 0;
            }
          }
        }

        .r-b {
          .address {
            height: 33rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 24rpx;
            color: #00000073;
            letter-spacing: 0;
            margin-bottom: 20rpx;
            text-align: right;
          }

          .money {
            .icon {
              color: #000000a3;
              font-size: 24rpx;
              font-face: PingFangSC;
              font-weight: 500;
              line-height: 0;
              letter-spacing: 0;
            }

            .num {
              color: #ff9e24;
              font-size: 36rpx;
              font-face: PingFangSC;
              font-weight: 500;
              line-height: 0;
              letter-spacing: 0;

              .k {
                color: #ff9e24;
                font-size: 24rpx;
                font-face: PingFangSC;
                font-weight: 500;
                line-height: 0;
                letter-spacing: 0;
              }
            }
          }
        }
      }
    }

    .toApply {

      .title {
        width: 144rpx;
        height: 50rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 36rpx;
        color: #000000e0;

        margin-top: 40rpx;
        margin-bottom: 32rpx;
      }

      .industry {
        display: flex;
        margin-bottom: 24rpx;

        .t1 {
          height: 40rpx;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 28rpx;
          color: #00000073;
          letter-spacing: 0;
          margin-right: 40rpx;
        }

        .t2 {
          height: 40rpx;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 28rpx;
          color: #000000a3;
          letter-spacing: 0;
        }
      }

      .industry-1 {
        display: flex;
        margin-bottom: 16rpx;

        .t1 {
          height: 40rpx;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 28rpx;
          color: #00000073;
          letter-spacing: 0;
          margin-right: 40rpx;
        }

        .t2 {
          height: 40rpx;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 28rpx;
          color: #000000a3;
          letter-spacing: 0;
        }
      }

      .desc {
        width: 702rpx;
        height: 64rpx;
        text-align: center;
        background: #317ed008;
        border-radius: 8rpx;

        .text {
          opacity: 1;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 22rpx;
          color: #317ed0;
          line-height: 64rpx;
        }
      }

      .contentDesc {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 28rpx;
        color: #00000073;
        letter-spacing: 0;
        text-align: justify;
        line-height: 48rpx;
      }
    }
  }
}

.footer-operateH {
  min-height: 140rpx;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
}

.footer-operate {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 140rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
  padding: 0 30rpx;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;

  .footer-btn {
    width: 420rpx;
    height: 88rpx;
    font-size: 28rpx;
    color: #000000;
    line-height: 88rpx;
    text-align: center;
    background: rgba(216, 216, 216, 0.24);
    border-radius: 50rpx;

    &.active {
      color: #ffffff;
      background: #ff9e24;
    }
  }
}
</style>
